<template>
  <div class="basic-info">
    <h3 v-if="name" class="basic-name">
      {{ name }} <span class="desc"><slot name="subName" /></span>
    </h3>
    <div v-if="showLine" class="subtitle-label">
      <div v-if="lineShow" class="item-line" />
      <div class="form-title">
        {{ title }}
        <slot name="title" />
      </div>
      <slot name="subTitle" />
    </div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'PageBlock',
  props: {
    title: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    showLine: {
      type: Boolean,
      default: true,
    },
    lineShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.basic-info {
  background: #fff;
  border-radius: 5px;
  padding: 10px 24px;
  margin-top: 8px;
  .basic-name {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 16px;
    padding-top: 20px;
   }
  .desc {
    margin-left: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #909399;
    line-height: 20px;
  }
  .item-line {
    // width: 4px;
    // height: 18px;
    // background: #06b880;
    // border-radius: 2px;
    // margin-right: 10px;
    width: 7px;
    height: 7px;
    background: #06b880;
    transform: rotateZ(45deg)skew(3deg,0deg);
    margin-right: 10px;
    margin-bottom: 4px;
  }
  .subtitle-label {
    display: flex;
    align-items: center;
    // padding: 0 10px;
  }
  .form-title {
    font-weight: 500;
    font-size: 16px;
    padding: 16px 0;
    color: #06B880;
  }
}
</style>
